<template>
  <view class="page">
    <image
      :lazy-load="true"
      class="bg"
      :src="imgBaseUrlV2 + 'service-provider-detail-bg.png'"
      mode="widthFix"
      v-if="false"
    ></image>
    <view class="info" v-if="dataInfo.id && false">
      <view class="cover-view">
        <image
          :lazy-load="true"
          class="cover"
          :src="
            dataInfo.logo
              ? dataInfo.logo
              : imgBaseUrlV0 + 'temporary/service-provicer-cover.png'
          "
          mode="aspectFill"
        ></image>
      </view>
      <text class="title">{{ dataInfo.name }}</text>
      <view class="address-view">
        <image
          :lazy-load="true"
          class="address-icon"
          :src="imgBaseUrlV0 + 'location-icon.png'"
          mode="widthFix"
        ></image>
        <text class="address">{{ dataInfo.address }}</text>
      </view>
      <view class="phone-view">
        <image
          :lazy-load="true"
          class="phone-icon"
          :src="imgBaseUrlV0 + 'phone-icon.png'"
          mode="widthFix"
        ></image>
        <text class="phone" @click="onContact(dataInfo.contact_mobile)">{{
          dataInfo.contact_mobile
        }}</text>
      </view>
    </view>

    <view class="service-project" v-if="serviceProject">
      <view class="title-view">
        <text class="title">{{ serviceProject.title }}</text>
      </view>
      <view class="content">
        {{ serviceProject.content }}
      </view>
      <!-- <view class="apply-service-view">
        <text class="apply-service" @click="openServiceApplication"
          >立即维保</text
        >
      </view>
      <view class="contact-customer-service-view">
        <text
          class="contact-customer-service"
          @click="showContactCustomerService = true"
          >联系客服</text
        >
      </view> -->
    </view>
    <u-modal
      v-model="showContactCustomerService"
      :title="'客服热线'"
      :content="dataInfo.contact_mobile"
      confirm-text="联系"
      :show-cancel-button="true"
      v-if="dataInfo.id"
      @confirm="onContact(dataInfo.contact_mobile)"
    ></u-modal>

    <view class="fixed" v-if="false">
      <button class="btn btn-service" @click="openServiceApplication">
        立即维保
      </button>
      <button
        class="btn btn-contact"
        @click="showContactCustomerService = true"
      >
        联系客服
      </button>
    </view>
    <Message ref="message"></Message>
  </view>
</template>

<script>
import detailModule from "@/common/mixins/detail-module";
import { mapState } from "vuex";
import { getServiceProviderOptions } from "@/common/api/service-provider";
import { imgBaseUrlV0, imgBaseUrlV2 } from "@/common/config/index";
// const { imgBaseUrl } = conf;
export default {
  mixins: [detailModule],
  computed: {
    ...mapState("User", ["userInfo"]),
  },
  data() {
    return {
      imgBaseUrlV0,
      imgBaseUrlV2,
      serviceProject: null,
      showContactCustomerService: false,
      mixinViewOptions: {
        getURL: "/service/detail",
        isPage: false,
        isShowLoading: true,
        reachBottom: false,
        createdIsNeed: false,
        pullDown: true,
      },
      service: null,
    };
  },
  onLoad(e) {
    if (e.serviceId) {
      this.dataForm.id = e.serviceId;
    }
    this.serviceProjectId = e.serviceProjectId;
    this.dataQuery = e;
    this.initData();
  },
  methods: {
    fetchComplete(err, data) {},
    async initData() {
      Promise.all([
        this.getDataInfo(),
        this.getServiceProviderOptions({
          id: this.dataQuery.serviceId,
        }),
      ]);
    },
    getServiceProviderOptions(data) {
      return getServiceProviderOptions(data)
        .then((res) => {
          if (res.code !== this.$ERR_OK) {
            return this.message.error(res.message || "获取服务项目信息失败");
          }
          let data = res.data || [];
          let item = data.find((i) => i.id == this.serviceProjectId);
          if (item.title) {
            uni.setNavigationBarTitle({
              title: "服务项目 - " + item.title,
            });
          }
          this.serviceProject = item ? item : {};
        })
        .catch((err) => {});
    },
    onContact(phoneNumber) {
      uni.makePhoneCall({
        phoneNumber: phoneNumber,
      });
    },
    openServiceApplication() {
      if (!this.$hasPermission("ServiceList/serviceDevice")) {
        return this.message.error("无权限操作!");
      }
      if (!this.userInfo.id) {
        uni.navigateTo({
          // url: "/pages/login-by-phone/login-by-phone",
          url: "/pages/login/index",
        });
      } else {
        this.$Router.push({
          // path: "/pages/service-application/service-application",
          path: "/pageA/service/apply/index",
          query: {
            serviceProjectId: this.serviceProject.id,
            servicer_id: this.dataInfo.id,
          },
        });
      }
    },
  },
};
</script>

<style lang="scss" scoped>
page,
.page {
  min-height: calc(100vh - var(--window-top));
  background: linear-gradient(180deg, #0D1523 0%, #102945 100%);
  position: relative;
  padding-bottom: 100rpx;
}

.bg {
  width: 100%;
}

.info {
  position: relative;
  padding: 20rpx 30rpx;
  padding-top: 10rpx;
  // border-bottom: 5rpx solid #C1D3E1;

  .cover-view {
    position: absolute;
    display: block;
    top: -90rpx;
    background-color: #fff;
    border-radius: 10rpx;
    box-shadow: 0px 6rpx 8rpx rgba(86, 86, 86, 0.6);
    .cover {
      display: block;
      width: 150rpx;
      height: 150rpx;
    }
  }
  .title {
    position: absolute;
    left: 210rpx;
    top: -75rpx;
    color: #fff;
    font-weight: 700;
    font-size: 32rpx;
    letter-spacing: 3rpx;
  }
  .address-view {
    padding-left: 180rpx;

    .address-icon {
      width: 20rpx;
      vertical-align: middle;
    }
    .address {
      padding-left: 10rpx;
      font-size: 26rpx;
      line-height: 50rpx;
      color: #434343;
    }
  }
  .phone-view {
    padding-left: 180rpx;

    .phone-icon {
      width: 20rpx;
      vertical-align: middle;
    }
    .phone {
      padding-left: 10rpx;
      font-size: 26rpx;
      line-height: 50rpx;
      color: #434343;
    }
  }
}

.service-project {
  .title-view {
    text-align: center;
    padding-bottom: 10rpx;

    .title {
      display: inline-block;
      padding: 26rpx 50rpx 0rpx;
      color: #ffffff;
      font-size: 32rpx;
      font-weight: 700;
      border-radius: 10rpx;
      letter-spacing: 3rpx;
    }
  }
  .content {
    padding: 20rpx 30rpx;
    /* background-color: #dbdbdb; */
    color: #fff;
    font-size: 28rpx;
    line-height: 42rpx;

    white-space: pre-line;
  }
  .apply-service-view {
    text-align: center;
    padding-top: 50rpx;

    .apply-service {
      display: inline-block;
      width: 70%;
      background-color: #5096ff;
      color: #fff;
      padding: 20rpx 0;
      border-radius: 10rpx;
      letter-spacing: 3rpx;
    }
  }
  .contact-customer-service-view {
    text-align: center;
    padding: 30rpx 0;

    .contact-customer-service {
      display: inline-block;
      width: 70%;
      background-color: #004986;
      color: #fff;
      padding: 20rpx 0;
      border-radius: 10rpx;
      letter-spacing: 3rpx;
    }
  }
}

.contact-customer-service-dialog-view {
  position: absolute;
  left: 0;
  top: 0;
  width: 100%;
  height: 100%;
  background-color: rgba($color: #000000, $alpha: 0.6);

  .main {
    position: absolute;
    top: 0;
    width: 100%;
    margin-top: 400rpx;
    text-align: center;

    .window {
      display: inline-block;
      width: 70%;
      padding: 40rpx 30rpx;
      color: #fff;
      text-align: center;
      background-color: #1b4996;
      box-shadow: #637ba0 0px 0px 40rpx 1rpx inset;
      border-radius: 8rpx;

      .title {
        display: block;
        line-height: 60rpx;
        font-size: 28rpx;
        font-weight: 700;
      }
      .phone-number {
        display: block;
        line-height: 60rpx;
        font-size: 26rpx;
      }
      .contact {
        display: block;
        margin: 20rpx 0;
        padding: 24rpx 0;
        width: 100%;
        font-size: 26rpx;
        background-color: #5096ff;
        border-radius: 8rpx;
      }
    }
    .close-view {
      padding-top: 30rpx;
      text-align: center;

      .close-icon-view {
        display: inline-block;

        .close-icon {
          padding: 24rpx;
          border-radius: 50%;
          background-color: #2a6aae;
        }
      }
    }
  }
}

.fixed {
  position: fixed;
  display: flex;
  width: 100%;
  height: 92rpx;
  line-height: 92rpx;
  bottom: 0;
  left: 0;
  > .btn {
    flex: 1 0 50%;
    background: #4070d5;
    border-radius: 0;
    &.btn-contact {
      background: #3f7dff;
    }
  }
}
</style>